<template>
  <div class="body">
    <top-nav></top-nav>
    <swiper :options="swiperOption">
      <swiper-slide v-for="slide in reqData.adv" v-tap="{methods:goAdvDetail,slide}"><img :src="slide.photo" :alt="slide.subject" class="swiperImg" ></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <quickly-nav :items="reqData" ></quickly-nav>
  </div>
</template>
<script>
  import topNav from './components/topNav'
  import quicklyNav from './components/quicklyNav'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  export default {
    name: 'index',
    data () {
      return {
        title: '测试版搜索商品',
        quicklyNavData: {
          pre_info: {
            imgTitle: '/static/images/index/presell.jpg',
            class: 'presellTitle',
          },
          brand: {
            imgTitle: '/static/images/index/all_nav.png',
            class: 'sort',
          },
          future_Brand: {
            imgTitle: '/static/images/index/future_good_nav.jpg',
            class: 'future',
          },
          goods: {
            imgTitle: '/static/images/index/selected.png',
            class: 'good',
          }
        },
        swiperOption: {
          autoplay: 6000,
          initialSlide: 1,
          loop: true,
          pagination: '.swiper-pagination',
          onSlideChangeEnd: swiper => {
//            console.log('onSlideChangeEnd', swiper.realIndex)
          }
        },
        reqData: {
          quickly: [
            {img: '/static/images/index/new_goods.jpg', title: '新品到货', class: 'order'},
            {img: '/static/images/index/papid.jpg', title: '快速补货', class: 'replenishment'},
            {img: '/static/images/index/about.jpg', title: '关于我们', class: 'aboutUs'}],
          future_brand: []
        },
      }
    },
    methods: {
      goAdvDetail (params) {
        console.info(params.slide)
      }
    },
    components: {
      topNav,
      quicklyNav,
      swiper,
      swiperSlide,
    },
//    创建的时候请求数据
    beforeCreate () {
      // 表示实例
      let self = this
      this.$rpc(this.$api.main, function (data) {
        self.reqData = Object.assign({}, self.reqData, data)

      })
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .body{
    background: #f3f4f5;
  }
 .top{width: 100%;
   height: 44px;
   background: #824094;
   z-index: 20;
   top: 0;
   box-sizing: inherit;
   -moz-box-sizing: inherit;
   -webkit-box-sizing: inherit;
   position: fixed;
   left: 0;}
 .swiperImg{
   width: 100%;
   display: inline-block;
 }
 .top .logo {
   float: left;
   width: 6%;
   margin: 9px 2% 0 5%;
   max-width: 22px;
 }
 .top .logo img {
   max-width: 22px;
 }
 .top .searchBtn {border:none;outline:none;width:70%;height:26px;margin-top:9px;margin-left:2%;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border:6px;background:#bd9ac4;text-align:center;line-height:26px;color:#824094;font-size:10px; display:block; float:left;text-decoration: none}
 .top .news {float:right;height:24px;background:url(../../../static/images/index/news.png) no-repeat;width:5%; max-width:18px;background-size:100%;margin:14px 4% 0 0;position:relative;}
</style>
